<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI聊天应用</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 20px;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #chatApp {
      width: 100%;
      max-width: 1200px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 89vh;
    }

    /* 聊天头部样式 */
    .chat-header {
      background: linear-gradient(90deg, #3494E6, #EC6EAD);
      color: white;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .chat-header h1 {
      font-size: 1.8rem;
      font-weight: 600;
    }

    .header-actions {
      display: flex;
      gap: 15px;
    }

    .header-actions button {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .header-actions button:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.1);
    }

    /* 主内容区域 */
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* 侧边栏样式 */
    .sidebar {
      width: 302px;
      background: #f8f9fa;
      padding: 25px 15px;
      border-right: 1px solid #e9ecef;
      display: flex;
      flex-direction: column;
      gap: 20px;
      overflow-y: auto;
    }

    .module {
      background: white;
      border-radius: 15px;
      padding: 18px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }

    .module:hover {
      transform: translateY(-5px);
      border-color: #3494E6;
    }

    .module.active {
      border-color: #3494E6;
      background: #e3f2fd;
    }

    .module-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .module-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: linear-gradient(45deg, #3494E6, #EC6EAD);
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }

    .module h3 {
      font-size: 1.1rem;
      color: #2c3e50;
    }

    .module p {
      font-size: 0.9rem;
      color: #7f8c8d;
      line-height: 1.5;
    }

    /* 内容区域样式 */
    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* 消息列表样式 */
    .message-list {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .message {
      max-width: 80%;
      padding: 15px;
      border-radius: 18px;
      position: relative;
      line-height: 1.5;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .message.user {
      align-self: flex-end;
      background: linear-gradient(90deg, #3494E6, #EC6EAD);
      color: white;
      border-bottom-right-radius: 5px;
    }

    .message.ai {
      align-self: flex-start;
      background: #f1f3f5;
      color: #2c3e50;
      border-bottom-left-radius: 5px;
    }

    .message-time {
      font-size: 0.7rem;
      margin-top: 5px;
      opacity: 0.7;
      text-align: right;
    }

    .typing-indicator {
      align-self: flex-start;
      background: #f1f3f5;
      color: #2c3e50;
      padding: 15px;
      border-radius: 18px;
      border-bottom-left-radius: 5px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .typing-dot {
      width: 8px;
      height: 8px;
      background: #7f8c8d;
      border-radius: 50%;
      animation: typingAnimation 1.4s infinite;
    }

    .typing-dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .typing-dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes typingAnimation {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-5px); }
    }

    /* 输入区域样式 */
    .input-area {
      padding: 20px;
      border-top: 1px solid #e9ecef;
      display: flex;
      gap: 15px;
      background: white;
      align-items: flex-end;
    }

    .textarea-wrapper {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
      background: #fff;
      border: 2px solid #e9ecef;
      border-radius: 25px;
      padding: 10px 15px;
      transition: all 0.3s ease;
    }

    .textarea-wrapper:focus-within {
      border-color: #3494E6;
      box-shadow: 0 0 0 2px rgba(52, 148, 230, 0.2);
    }

    textarea {
      width: 100%;
      border: none;
      outline: none;
      resize: none;
      font-size: 1rem;
      line-height: 1.5;
      max-height: 150px;
      overflow-y: auto;
      padding: 5px 0;
      background: transparent;
    }

    textarea::placeholder {
      color: #adb5bd;
    }

    .action-buttons {
      display: flex;
      gap: 10px;
    }

    button {
      background: linear-gradient(90deg, #3494E6, #EC6EAD);
      color: white;
      border: none;
      border-radius: 50px;
      padding: 12px 25px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    button:hover {
      transform: scale(1.05);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    button.clear {
      background: linear-gradient(90deg, #e74c3c, #c0392b);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      main {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
        padding: 15px;
      }

      .message {
        max-width: 90%;
      }

      .input-area {
        flex-direction: column;
        align-items: stretch;
      }

      .action-buttons {
        align-self: flex-end;
      }
    }
  </style>
</head>
<body>
<div id="chatApp">
  <!-- 聊天头部 -->
  <div class="chat-header">
    <h1><i class="fas fa-robot"></i> AI智能助手</h1>
    <div class="header-actions">
      <button title="设置"><i class="fas fa-cog"></i></button>
      <button title="用户信息"><i class="fas fa-user"></i></button>
    </div>
  </div>

  <main>
    <div class="sidebar">
      <div class="module active">
        <div class="module-header">
          <div class="module-icon">
            <i class="fas fa-comments"></i>
          </div>
          <h3>聽雨</h3>
        </div>
        <p>豆蔻娉娉含蕊时，象牙肌骨袜羊脂。</p>
        <p>天人道是衣无缝，自可冰心著白丝。</p>
      </div>

      <div class="module">
        <div class="module-header">
          <div class="module-icon">
            <i class="fas fa-lightbulb"></i>
          </div>
          <h3>创意助手</h3>
        </div>
        <p>帮助您进行头脑风暴和创意构思</p>
      </div>

      <div class="module">
        <div class="module-header">
          <div class="module-icon">
            <i class="fas fa-code"></i>
          </div>
          <h3>编程助手</h3>
        </div>
        <p>协助编写和调试代码</p>
      </div>
    </div>

    <div class="content">
      <!-- 消息列表 -->
      <div class="message-list">
        <div class="message ai">
          <div class="message-content">
            您好！我是AI智能助手，有什么可以帮您的吗？
          </div>
          <div class="message-time">刚刚</div>
        </div>

        <div class="message user">
          <div class="message-content">
            请问你能帮我写一首关于春天的诗吗？
          </div>
          <div class="message-time">10:25</div>
        </div>

        <div class="message ai">
          <div class="message-content">
            当然可以！以下是我为您创作的一首关于春天的诗：<br><br>
            《春之韵》<br>
            春风轻拂绿柳枝，<br>
            桃花笑靥映清池。<br>
            燕子归来寻旧垒，<br>
            一片生机正此时。
          </div>
          <div class="message-time">10:26</div>
        </div>

        <div class="typing-indicator" v-if="isTyping">
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
          <span>AI正在思考...</span>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="input-area">
        <div class="textarea-wrapper">
                        <textarea
                          placeholder="输入您的问题或指令..."
                          rows="1"
                          @input="autoResize"
                          @keydown.enter.exact.prevent="sendMessage"
                          @keydown.shift.enter.prevent="addNewLine"
                        ></textarea>
        </div>
        <div class="action-buttons">
          <button @click="sendMessage"><i class="fas fa-paper-plane"></i> 发送</button>
          <button class="clear" @click="clearMessages"><i class="fas fa-trash"></i> 清除</button>
        </div>
      </div>
    </div>
  </main>
</div>

<script>
  // Vue组件逻辑
  const app = {
    data() {
      return {
        isTyping: false,
        userInput: ''
      };
    },
    methods: {
      autoResize(event) {
        const textarea = event.target;
        textarea.style.height = 'auto';
        textarea.style.height = textarea.scrollHeight + 'px';

        // 限制最大高度
        if (textarea.scrollHeight > 150) {
          textarea.style.overflowY = 'auto';
        } else {
          textarea.style.overflowY = 'hidden';
        }
      },
      addNewLine(event) {
        // Shift+Enter 添加新行
        const textarea = event.target;
        const cursorPosition = textarea.selectionStart;
        const currentValue = textarea.value;

        textarea.value = currentValue.substring(0, cursorPosition) +
          '\n' +
          currentValue.substring(cursorPosition);

        // 移动光标到新位置
        textarea.selectionEnd = cursorPosition + 1;

        // 触发resize
        this.autoResize(event);
      },
      sendMessage() {
        const textarea = document.querySelector('textarea');
        const message = textarea.value.trim();

        if (!message) return;

        // 添加用户消息
        const messageList = document.querySelector('.message-list');
        const userMessageEl = document.createElement('div');
        userMessageEl.className = 'message user';
        userMessageEl.innerHTML = `
                        <div class="message-content">${message.replace(/\n/g, '<br>')}</div>
                        <div class="message-time">${this.getCurrentTime()}</div>
                    `;
        messageList.appendChild(userMessageEl);

        // 清空输入框
        textarea.value = '';
        textarea.style.height = 'auto';

        // 显示AI正在输入
        this.isTyping = true;

        // 模拟AI回复
        setTimeout(() => {
          this.isTyping = false;

          const aiMessageEl = document.createElement('div');
          aiMessageEl.className = 'message ai';
          aiMessageEl.innerHTML = `
                            <div class="message-content">
                                感谢您的消息！我已经收到您的内容：「${message}」。这是一个支持自动换行的文本输入框演示。
                            </div>
                            <div class="message-time">${this.getCurrentTime()}</div>
                        `;
          messageList.appendChild(aiMessageEl);

          // 滚动到底部
          messageList.scrollTop = messageList.scrollHeight;
        }, 2000);

        // 滚动到底部
        messageList.scrollTop = messageList.scrollHeight;
      },
      clearMessages() {
        if (confirm('确定要清除所有聊天记录吗？')) {
          const messageList = document.querySelector('.message-list');
          const messages = messageList.querySelectorAll('.message, .typing-indicator');

          messages.forEach((msg, index) => {
            if (index > 0) { // 保留第一条欢迎消息
              msg.remove();
            }
          });
        }
      },
      getCurrentTime() {
        const now = new Date();
        return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
      }
    },
    mounted() {
      // 初始调整文本区域大小
      const textarea = document.querySelector('textarea');
      textarea.addEventListener('input', this.autoResize);

      // 初始滚动到底部
      const messageList = document.querySelector('.message-list');
      messageList.scrollTop = messageList.scrollHeight;
    }
  };

  // 初始化
  const { createApp } = Vue;
  createApp(app).mount('#chatApp');
</script>
</body>
</html>
